<template>
    <el-container>
        <el-header style="padding:0 0">
            <el-menu background-color="rgb(84,92,100)" mode="horizontal">
                <div class="header">
                    <p style="color: rgb(255,208,75);font-family: cursive;font-size: x-large;">
                        水果网络销售平台
                    </p>
                    <el-dropdown trigger="click">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                        </el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-setting">设置</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-coin" @click.native="loginOut">退出登录</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-more-outline">更多</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-menu>
        </el-header>
        <el-main>
            <el-tabs v-model="activeName" @tab-click="handleClick()">
                <el-tab-pane label="货物管理" name="first">
                    <template>
                        <template>
                            名称:
                            <el-input type="input" v-model="searchForm.searchGName"
                                style="width: 210px;margin-right: 20px;" />
                            产地:
                            <el-input type="input" v-model="searchForm.searchGLocality"
                                style="width: 210px;margin-right: 20px;" />
                            价格:
                            <el-input type="input" v-model="searchForm.lowerPrice" style="width: 105px;" />
                            -
                            <el-input type="input" v-model="searchForm.higherPrice" style="width: 105px;" />
                            <template>
                                <div style="margin-bottom: 15px;margin-top: 15px;">
                                    <span class="demonstration">创建时间: </span>
                                    <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="选择日期时间">
                                    </el-date-picker>
                                    <span class="demonstration"> - </span>
                                    <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="选择日期时间"
                                        align="right" :picker-options="pickerOptions">
                                    </el-date-picker>
                                    <el-button @click="searchGoodsLike()" type="primary" style="margin-left: 23px;">搜索
                                    </el-button>
                                </div>

                            </template>
                            <div style="border-top: ridge;">
                                <template>
                                    <el-button size="mini" type="primary" @click="addFruitVisible = true"
                                        style="margin-right: 22px;margin-top: 5px;">添加
                                    </el-button>
                                    <el-dialog title="添加商品记录" :visible.sync="addFruitVisible" center>
                                        <create-goods></create-goods>
                                    </el-dialog>
                                </template>
                                <el-table v-model="goodsData" :data="goodsData" size="90px" style="width: 100%">

                                    <el-table-column prop="sortId" label="序号" width="180" type="index">
                                    </el-table-column>
                                    <el-table-column prop="fruitName" label="名称" width="180">
                                    </el-table-column>
                                    <el-table-column prop="price" label="价格">
                                    </el-table-column>
                                    <el-table-column prop="locality" label="产地">
                                    </el-table-column>
                                    <el-table-column prop="createTime" label="创建时间">
                                    </el-table-column>
                                    <el-table-column align="right">
                                        <template slot-scope="fruitScope">
                                            <el-button style="margin-right: 10px;" type="primary" size="mini"
                                                @click="fruitTab(fruitScope.row)">编辑
                                            </el-button>
                                            <el-dialog title="修改商品信息" :visible.sync="editFruitVisible" center>
                                                <div style="width: 412px;margin: 0 auto;">
                                                    <el-form :model="goodsForm" status-icon ref="form"
                                                        label-width="100px" class="demo-ruleForm">
                                                        <el-form-item label="名称" prop="fruitName" style="width:380px">
                                                            <el-input type="" v-model="goodsForm.fruitName"
                                                                :placeholder="goodsForm.fruitName" autocomplete="off">
                                                            </el-input>
                                                        </el-form-item>

                                                        <el-form-item label="价格" prop="price" style="width:380px">
                                                            <el-input type="input" v-model="goodsForm.price"
                                                                :placeholder="goodsForm.price" autocomplete="off">
                                                            </el-input>
                                                        </el-form-item>

                                                        <el-form-item label="产地" prop="locality" style="width:380px">
                                                            <el-input type="input" v-model="goodsForm.locality"
                                                                :placeholder="goodsForm.locality" autocomplete="off">
                                                            </el-input>
                                                        </el-form-item>

                                                        <el-form-item>
                                                            <el-button type="primary" @click="EditFruit(goodsForm)">提交
                                                            </el-button>
                                                        </el-form-item>

                                                    </el-form>

                                                </div>
                                            </el-dialog>
                                            <el-button size="mini" type="danger"
                                                @click="fruitDelete(fruitScope.row.fruitId)">删除
                                            </el-button>
                                            <el-button size="mini" type="primary"
                                                @click="accessory(fruitScope.row.fruitId)">附属品
                                            </el-button>
                                            <el-dialog :visible.sync="accessoryVisible">
                                                <div style="margin-top: 20px">
                                                    <el-button @click="addAccessoryVisible = true">添加</el-button>
                                                    <el-button type="danger" @click="deleteAccessory()">删除</el-button>
                                                </div>

                                                <el-table v-model="accessoryData" ref="multipleTable"
                                                    :data="accessoryData" tooltip-effect="dark" style="width: 100%"
                                                    @selection-change="handleSelectionChange">
                                                    <el-table-column type="selection" width="55">
                                                    </el-table-column>
                                                    <el-table-column prop="accessoryName" label="名称" width="120">
                                                    </el-table-column>
                                                    <el-table-column prop="price" label="价格" width="120">
                                                    </el-table-column>
                                                    <el-table-column prop="createTime" label="创建时间"
                                                        show-overflow-tooltip>
                                                    </el-table-column>
                                                </el-table>

                                            </el-dialog>

                                            <el-dialog :visible.sync="addAccessoryVisible">
                                                <div style="width: 412px;margin: 0 auto;">
                                                    <el-form :model="addAccessoryForm" status-icon ref="form"
                                                        label-width="100px" class="demo-ruleForm">
                                                        <el-form-item label="名称" prop="accessoryName"
                                                            style="width:380px">
                                                            <el-input type="input" placeholder="请输入名称"
                                                                autocomplete="off"
                                                                v-model="addAccessoryForm.accessoryName">
                                                            </el-input>
                                                        </el-form-item>

                                                        <el-form-item label="价格" prop="price" style="width:380px">
                                                            <el-input type="input" placeholder="请输入价格"
                                                                autocomplete="off" v-model="addAccessoryForm.price">
                                                            </el-input>
                                                        </el-form-item>

                                                        <el-form-item>
                                                            <el-button type="primary" @click="addAccessory()">提交
                                                            </el-button>
                                                        </el-form-item>

                                                    </el-form>

                                                </div>
                                            </el-dialog>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                        </template>
                    </template>
                    <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="size"
                        layout="total, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </el-tab-pane>

              <el-tab-pane label="零售商管理" name="second">
                <template>
                  <el-table v-model="tableData"
                            :data="tableData.filter(data => !search || data.retailerName.toLowerCase().includes(search.toLowerCase()))"
                            style="width: 100%" :default-sort = "{prop: 'retailerId', order: 'ascending'}" height="600">
                    <el-table-column
                        prop="retailerId"
                        label="零售商id"
                        width="180"
                        sortable>
                    </el-table-column>
                    <el-table-column prop="retailerName" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址"
                        :filters="[{text: '重庆', value: '重庆'},
                                 {text: '四川', value: '四川'},
                                  {text: '北京', value: '北京'},
                                  {text: '新疆', value: '新疆'},
                                  {text: '浙江', value: '浙江'},
                                  {text: '海南', value: '海南'},]"
                        :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column prop="telephone" label="电话">
                    </el-table-column>
                    <el-table-column align="right">
                      <template slot="header" slot-scope="scope">
                        <!-- Table -->
                        <el-button type="primary" size="mini" @click="addTableVisible = true"
                                   style="margin-right: 22px">新增
                        </el-button>
                        <el-dialog title="添加零售商" :visible.sync="addTableVisible" center :before-close="handleClose">
                          <create-retailer @changVisiable="changVisiable"></create-retailer>
                        </el-dialog>

                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索"
                                  style="width: 116px;" />
                      </template>
                      <template slot-scope="scope">
                        <el-button style="margin-right: 10px;" type="primary" size="mini"
                                   @click="sb(scope.row)">编辑
                        </el-button>
                        <el-dialog title="修改零售商信息" :visible.sync="editTableVisible" center>
                          <div id="div" style="width: 412px;margin: 0 auto;">
                            <el-form :model="form" status-icon ref="form" label-width="100px"
                                     class="demo-ruleForm">
                              <el-form-item label="零售商id" prop="retailerId" style="width:380px">
                                <el-input type="" v-model="form.retailerId"
                                          :placeholder="form.retailerId" :disabled="true"
                                          autocomplete="off">
                                </el-input>
                              </el-form-item>

                              <el-form-item label="姓名" prop="retailerName" style="width:380px">
                                <el-input type="input" v-model="form.retailerName"
                                          :placeholder="form.retailerName" autocomplete="off">
                                </el-input>
                              </el-form-item>

                              <el-form-item label="地址" prop="address" style="width:380px">
                                <el-input type="input" v-model="form.address"
                                          :placeholder="form.address" autocomplete="off">
                                </el-input>
                              </el-form-item>

                              <el-form-item label="电话号码" prop="telephone" style="width:380px">
                                <el-input type="input" v-model="form.telephone"
                                          :placeholder="form.telephone" autocomplete="off">
                                </el-input>
                              </el-form-item>

                              <el-form-item>
                                <el-button type="primary" @click="submitEdit(form)">提交</el-button>
                              </el-form-item>

                            </el-form>

                          </div>
                        </el-dialog>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-tab-pane>

              <el-tab-pane label="购销合同" name="third">
                    <el-table
                        :data="contractList.filter(data => !search || data.contractId.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                        <el-table-column label="合同ID" prop="contractId">
                        </el-table-column>
                        <el-table-column label="合同码" prop="barcode">
                        </el-table-column>
                        <el-table-column label="运输类型">
                            <template slot-scope="scope">
                                {{ scope.row.type == 1 ? "省内" : "省外" }}
                            </template>
                        </el-table-column>
                        <el-table-column label="零售商姓名" prop="retailerName">
                        </el-table-column>
                        <el-table-column label="零售商电话" prop="telephone">
                        </el-table-column>
                        <el-table-column align="right" width="300px">
                            <template slot="header" slot-scope="scope">
                                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" style="width:200px" />
                                <el-button size="mini" type="primary">搜索</el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleChangeContract(scope.row)">编辑</el-button>
                                <el-button size="mini" @click="handleCheckContract(scope.row)" type="primary">查看
                                </el-button>
                                <el-button size="mini" type="danger" @click="deleteConstract(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-main>

        <!-- 购销合同的dialog -->
        <el-dialog :title="isEditContract == true ? '编辑购销合同' : '查看购销合同'" :visible.sync="showCheckConstractDialog"
            width="650px">
            <el-form :model="contractForm">
                <el-form-item label="合同ID" label-width="100px">
                    <el-input v-model="contractForm.contractId" autocomplete="off" style="width:500px"
                        :disabled="!isEditContract"></el-input>
                </el-form-item>
                <el-form-item label="合同码" label-width="100px">
                    <el-input v-model="contractForm.barcode" autocomplete="off" style="width:500px"
                        :disabled="!isEditContract"></el-input>
                </el-form-item>
                <el-form-item label="零售商ID" label-width="100px">
                    <el-input v-model="contractForm.retailer.retailerId" autocomplete="off" style="width:500px"
                        :disabled="!isEditContract">
                    </el-input>
                </el-form-item>
                <el-form-item label="零售商姓名" label-width="100px">
                    <el-input v-model="contractForm.retailer.retailerName" autocomplete="off" style="width:500px"
                        :disabled="!isEditContract">
                    </el-input>
                </el-form-item>
                <el-form-item label="零售商电话" label-width="100px">
                    <el-input v-model="contractForm.retailer.telephone" autocomplete="off" style="width:500px"
                        :disabled="!isEditContract">
                    </el-input>
                </el-form-item>

                <!-- 水果表格 -->
                <el-table :data="contractForm.fruitList" style="width: 100%" @cell-dblclick="changeFruitList">
                    <el-table-column prop="fruitId" label="ID" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="120">
                        <template slot-scope="scope">
                            <div v-if="row.fruitId === scope.row.fruitId && column.id === scope.column.id">
                                <el-input @blur="updateFruitInfo" v-model="contractForm.fruitList[scope.$index].name">
                                </el-input>
                            </div>

                            <div v-else>
                                {{ scope.row.name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格" sortable width="120">
                        <template slot-scope="scope">
                            <div v-if="row.fruitId === scope.row.fruitId && column.id === scope.column.id">
                                <el-input @blur="updateFruitInfo" v-model="contractForm.fruitList[scope.$index].price">
                                </el-input>
                            </div>
                            <div v-else>
                                {{ scope.row.price }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="locality" label="产地" width="120">
                        <template slot-scope="scope">
                            <div v-if="row.fruitId === scope.row.fruitId && column.id === scope.column.id">
                                <el-input @blur="updateFruitInfo"
                                    v-model="contractForm.fruitList[scope.$index].locality"></el-input>
                            </div>
                            <div v-else>
                                {{ scope.row.locality }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="数量" width="120">
                        <template slot-scope="scope">
                            <div v-if="row.fruitId === scope.row.fruitId && column.id === scope.column.id">
                                <el-input @blur="updateFruitInfo" v-model="contractForm.fruitList[scope.$index].number">
                                </el-input>
                            </div>
                            <div v-else>
                                {{ scope.row.number }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showCheckConstractDialog = false">取 消</el-button>
                <el-button type="primary" @click="showCheckConstractDialog = false">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>

</template>

<script>
import axios from "../../utils/api";
import CreateRetailer from "./AddRetailer";
import CreateGoods from "./AddGoods";

export default {
    name: "Main",
    components: { CreateRetailer, CreateGoods },
    data() {
        return {
            // 当前页码和每页个数
            page: 1,
            size: 8,
            total: 0,

            activeName: 'first',
            tableData: [],
            goodsData: [],

            // 附属品
            accessoryData: [],
            addAccessoryForm: {
                fruitId: '',
                accessoryName: '',
                price: '',
            },
            accessoryForm: {
                fruitId: '',
                accessoryId: '',
                accessoryName: '',
                price: '',
                createTime: ''
            },
            // 附属品选择
            multipleSelection: [],
            // 货物名称 价格 创建时间 产地
            searchForm: {
                sP: '',
                sPSize: '',
                searchGName: '',
                lowerPrice: '',
                higherPrice: '',
                startTime: '',
                endTime: '',
                searchGLocality: ''
            },
            goodsForm: {
                fruitId: '',
                fruitName: '',
                price: '',
                locality: '',
                createTime: ''
            },
            form: {
                retailerId: '',
                retailerName: '',
                address: '',
                telephone: ''
            },
            search: '',
            addFruitVisible: false,
            addTableVisible: false,
            editTableVisible: false,
            editFruitVisible: false,
            accessoryVisible: false,
            addAccessoryVisible: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', date);
                    }
                }]
            },

            //购销合同
            contractList: [],
            search: '',
            showCheckConstractDialog: false,
            row: "",
            col: "",
            isEditContract: true,
            //单个合同详情
            contractForm: {
                barcode: "",
                contractId: "",
                createTime: "",
                fruitList: [],
                retailer: {
                    address: "",
                    createTime: "",
                    retailerId: "",
                    retailerName: "",
                    states: "",
                    telephone: ""
                }
            }

        };
    },

    created() {
        // 获取商品数据
        this.getPageGoods(this.page);
        this.getContractList();
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        handleCurrentChange(page) {
            this.page = page
            this.getPageGoods(this.page)
        },
        handleClick() {
            // 获取零售商数据
            if (this.activeName === "first") {
                this.getPageGoods(this.page);
            } else if (this.activeName === "second") {
                this.getAllRetailer();
            }
        },
        // 修改商品信息弹出对话框
        fruitTab(info) {
            this.editFruitVisible = true
            this.goodsForm = info;
        },
        // 点击附属品弹出对话框
        accessory(id) {
            this.accessoryForm.fruitId = id;
            // console.log(id);
            this.accessoryVisible = true;
            axios.get("/getAccessoryByFruitId?fruitId=" + id).then(res => {
                this.accessoryData = res.data.data;
            }).catch(error => {
                alert(error);
            })
        },

        // 添加附属品
        addAccessory() {
            this.addAccessoryForm.fruitId = this.accessoryForm.fruitId;
            axios.post(axios.defaults.baseURL + "/addAccessory", this.addAccessoryForm).then(res => {
                if (res.data.data) {
                    alert("添加成功")
                } else
                    alert("添加失败")
                location.reload()
            }).catch(error => {
                alert(error);
            })
        },
        // 删除选中的附属品
        deleteAccessory() {
            axios.post(axios.defaults.baseURL + "/deleteAccessory", this.multipleSelection).then(res => {
                if (res.data.msg === "操作成功") {
                    alert("删除成功")
                } else
                    alert("删除失败")
                location.reload();
            }).catch(error => {
                alert(error)
            })
        },
        // 修改零售商弹出对话框
        sb(info) {
            this.editTableVisible = true;
            this.form = info
            console.log(info);
        },
        submitEdit(form) {
            console.log(form);
            axios.post(axios.defaults.baseURL + "/updateRetailer", form).then(res => {
                if (res.data.data === 1) {
                    alert("修改成功")
                    this.editTableVisible = false;
                    this.handleClick()
                } else {
                    alert("修改失败");
                }
            }).catch(error => {
                alert(error)
            })
        },
        // 修改商品信息
        EditFruit(form) {
            console.log(form);
            axios.post(axios.defaults.baseURL + "/updateGoods", form).then(res => {
                if (res.data.data === 1) {
                    alert("修改成功")
                } else {
                    alert("修改失败");
                }
                this.editFruitVisible = false;
                location.reload();
            }).catch(error => {
                alert(error)
            })
        },
        // 删除商品信息
        fruitDelete(fruitId) {
            axios.get(axios.defaults.baseURL + "/deleteGoodsById?fruitId=" + fruitId).then(res => {
                if (res.data.data === 1) {
                    alert("删除成功")
                    location.reload()
                    return;
                }
                alert("删除失败")
            }).catch(error => {
                alert(error)
            })
        },

        // 删除零售商信息
        handleDelete(index) {
            let id = this.tableData[index].retailerId
            axios.get(axios.defaults.baseURL + "/deleteRetailerById?id=" + id).then(res => {
                if (res.data.data === 1) {
                    alert("删除成功")
                    this.handleClick()
                    return;
                }
                alert("删除失败")
            }).catch(error => {
                alert(error)
            })
        },
        setting() {
        },

        // 获取全部商品信息
        getAllGoods() {
            axios.post(axios.defaults.baseURL + "/selectAllGoods").then(res => {
                // 查询出来的数据赋值给数组
                this.goodsData = res.data.data
            }).catch(error => {
                alert(error);
            });
        },

        // 分页查询商品
        getPageGoods(page) {
            axios.get(axios.defaults.baseURL + "/selectPageGoods?page=" + page + "&size=" + this.size).then(res => {
                let result = res.data.data;
                this.goodsData = result.list
                this.total = result.total
            }).catch(error => {
                alert(error)
            })
        },
        // 根据条件查询商品
        searchGoodsLike() {
            this.searchForm.sP = this.page;
            this.searchForm.sPSize = this.size;
            axios.post(axios.defaults.baseURL + "/searchGoodsLike", this.searchForm).then(res => {
                console.log(this.searchForm)
                console.log(res.data.data)
                this.goodsData = res.data.data
            }).catch(error => {
                alert(error)
            })
        },

        // 获取全部零售商数据
        getAllRetailer() {
            axios.post(axios.defaults.baseURL + "/selectAllRetailer").then(res => {
                // 查询出来的数据赋值给数组
                this.tableData = res.data.data
            }).catch(error => {
                alert(error);
            });
        },

        //查看购销合同
        handleCheckContract(item) {
            this.showCheckConstractDialog = true;
            this.isEditContract = false;
            this.getContractInfo(item.contractId)
        },
        //编辑购销合同
        handleChangeContract(item) {
            this.isEditContract = true;
            this.showCheckConstractDialog = true;
            this.getContractInfo(item.contractId)
        },
        //删除购销合同
        deleteConstract(row) {
            this.$confirm('此操作将永久删除该合同, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.post("/contract/deleteContract/" + row.contractId).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getContractList()
                }).catch(error => {
                    alert(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        loginOut() {
            this.$confirm('是否确认退出登录？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                localStorage.removeItem("token")
                this.$router.push("/")
                this.$message({
                    type: 'success',
                    message: '退出登录成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消成功'
                });
            });
        },
        //修改水果订单
        changeFruitList(row, column) {
            console.log(column.id);
            this.row = row;
            this.column = column;
        },
        updateFruitInfo() {
            this.row = "";
            this.col = ""
            axios({
                url: "/contract/updateContract",
                method: "post",
                data: JSON.stringify(this.contractForm)
            }).then(res => {
                console.log(res);
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            }).catch(error => {
                alert(error)
            })
        },
        //获取合同列表
        getContractList() {
            axios.get("/contract/queryAllContract").then(res => {
                this.contractList = res.data.data;
            }).catch(error => {
                alert(error);
            })
        },
        //获取当个合同详情
        getContractInfo(id) {
            axios.get("/contract/queryContract/" + id).then(res => {
                console.log(res);
                this.contractForm = res.data.data
            }).catch(error => {
                alert(error);
            })
        },

      changVisiable(){
        this.addTableVisible=false;
        this.getAllRetailer();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }

    }

}
</script>
<style>
.el-table tr {
    width: 150px;
    height: 63px;
}

.header {
    display: flex;
    justify-content: space-between;
}

.el-avatar {
    margin: 20px 20px 0 0;
}
</style>
